<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div class="box" id="box"></div> -->
    <a><canvas><button><canvas width="400px" height="400px"></canvas></button></a>
    <script>
        //获取canvas对象
        var canvas = document.querySelector('canvas')
        //设置2d上下文
        var context = canvas.getContext('2d')
        //获取渐变对象
        var gra = context.createLinearGradient(10,10,390,390)
        //设置渐变对象
        gra.addColorStop(0,'#ffa6a1')
        gra.addColorStop(0.6,'#eeaa44')
        gra.addColorStop(1,'#feca2f')
        //设置填充样式、描边样式
        context.fillStyle = gra
        context.strokeStyle = 'white'
        //设置线宽
        context.lineWidth = '1'
        //设置路径
        context.beginPath()
        context.arc(200,200,200,0,360)
        context.closePath()
        //设置字体、对齐
        context.font = '80px sans-serif'
        context.textAlign = 'center'
        //绘制圆形按钮
        context.fill()
        //绘制字体
        context.strokeText('START',200,225)
    
    </script>
</body>
</html>
<style>
     *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        a{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            margin-top: 100px;
            display: block;
        }
     .box {
        width: 400px;
        height: 400px;
        position: absolute;
        border: 1px solid #999; 
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border-radius: 50%;
        width: 500px;
        height: 500px;
        background-color:antiquewhite;
        /* 宽度和高度需要相等 */
      }
</style>